﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Shimba Bootstrap 4 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Beethemesdesign" name="author" />

    <!-- favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.png">


    <!-- Required css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />


</head>

<body>

    <!-- Begin page -->
    <div class="wrapper">

        <!-- ============================================================= -->
        <!-- ===============    side menu content start  ================= -->
        <!-- ============================================================= -->
        <div class="left-side-menu">
            <div class="slimscroll-menu">
                <!-------------------------------------->
                <!-- Put your logo hear in img tag -->
                <a href="index.html" class="logo">
                    <span class="logo-lg">
                        <img src="assets/images/logo.png" alt="">
                    </span>
                    <span class="logo-sm">
                        <img src="assets/images/logo_sm.png" alt="">
                    </span>
                </a>
                <!-- Logo content end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- User details start -->
                <div class="sidenav-user">
                    <h4 class="mb-1 mt-0">Cindy Deitch</h4>
                    <p class="mb-2">UI/UX Designer</p>
                    <img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle">
                </div>
                <!-- User details end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- Menu link start -->
                <ul class="metismenu side-nav">
                    <li class="menu-caption menu-item">Navigation</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-home"></i>
                            <span> Dashboards </span>
                            <span class="badge badge-success badge-pill float-right mr-3">New</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="dashboard-project.html">Project</a></li>
                            <li><a href="dashboard-sales.html">Sales</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-command"></i>
                            <span class="badge badge-danger badge-pill float-right mr-3">100+</span>
                            <span> Widgets </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="widgets-simple.html">Statistics</a></li>
                            <li><a href="widgets-data.html">Data</a></li>
                            <li><a href="widgets-chart.html">Chart</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">UI Components</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-box"></i>
                            <span> Bootstrap </span>
                            <span class="badge badge-primary-lighten badge-pill float-right mr-3">b4+</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="ui-alert.html">Alert</a></li>
                            <li><a href="ui-badge.html">Badge</a></li>
                            <li><a href="ui-breadcumb.html">Breadcumb</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-cards.html">Cards</a></li>
                            <li><a href="ui-collapse.html">Collapsed</a></li>
                            <li><a href="ui-dropdown.html">Dropdown</a></li>
                            <li><a href="ui-modals.html">Modals</a></li>
                            <li><a href="ui-pagination.html">Pagination</a></li>
                            <li><a href="ui-progress.html">Progress</a></li>
                            <li><a href="ui-spinners.html">Spinners</a></li>
                            <li><a href="ui-tabs.html">Tabs</a></li>
                            <li><a href="ui-toast.html">Toast</a></li>
                            <li><a href="ui-tooltip-popover.html">Tooltip & Popover</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-layers"></i>
                            <span> Advance UI Kit </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="aui-alerts.html">Alert</a></li>
                            <li><a href="aui-calendar.html">Calendar</a></li>
                            <li><a href="aui-dragula.html">Dragula</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-document"></i>
                            <span> Forms </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="form-elements.html">Basic Elements</a></li>
                            <li><a href="form-advanced.html">Form Advanced</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-fileuploads.html">File Uploads</a></li>
                            <li class="menu-item">
                                <a href="javascript: void(0);" aria-expanded="false">Editors<span class="menu-sub-icon"></span></a>
                                <ul class="menu-level-third" aria-expanded="false">
                                    <li><a href="form-editors-summernote.html">Summernote</a></li>
                                    <li><a href="form-editors-simplemde.html">Simplemde</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-feather"></i>
                            <span> Icons </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="icons-drip.html">Drip</a></li>
                            <li><a href="icons-feather.html">Feather</a></li>
                            <li><a href="icons-ion.html">Ion</a></li>
                            <li><a href="icon-linear.html">Linear</a></li>
                            <li><a href="icons-material.html">Material</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Charts & Maps</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-pie-chart"></i>
                            <span> Charts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="charts-apex.html">Apex</a></li>
                            <li><a href="charts-chartjs.html">Chartjs</a></li>
                            <li><a href="charts-knob.html">Knob</a></li>
                            <li><a href="charts-morris.html">Morris</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-map"></i>
                            <span> Maps </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="maps-google.html">Google Maps</a></li>
                            <li><a href="maps-vector.html">Vector Maps</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Tables</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-list"></i>
                            <span> Tables </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="tables-basic.html">Bootstrap Tables</a></li>
                            <li><a href="tables-datatable.html">Data Tables</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Pages</li>
                    <li class="menu-item">
                        <a href="pages-starter.html" class="menu-link">
                            <i class="feather icon-monitor"></i>
                            <span> Sample Page </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-profile.html" class="menu-link">
                            <i class="feather icon-user"></i>
                            <span> User Profile </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-invoice.html" class="menu-link">
                            <i class="feather icon-printer"></i>
                            <span> Invoice </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-faq.html" class="menu-link">
                            <i class="feather icon-help-circle"></i>
                            <span> FAQ </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-wifi-off"></i>
                            <span> Maintenance </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-404.html">Error 404</a></li>
                            <li><a href="pages-maintenance.html">Maintenance</a></li>
                            <li><a href="pages-comming-soon.html">Comming soon</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-lock"></i>
                            <span> Authentication </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-login.html">Login</a></li>
                            <li><a href="pages-login-2.html">Login 2</a></li>
                            <li><a href="pages-login-img.html">Login 3</a></li>
                            <li><a href="pages-register.html">Register</a></li>
                            <li><a href="pages-register-2.html">Register 2</a></li>
                            <li><a href="pages-register-img.html">Register 3</a></li>
                            <li><a href="pages-logout.html">Logout</a></li>
                            <li><a href="pages-logout-2.html">Logout 2</a></li>
                            <li><a href="pages-logout-img.html">Logout 3</a></li>
                            <li><a href="pages-recoverpw.html">Recover Password</a></li>
                            <li><a href="pages-recoverpw-2.html">Recover Password 2</a></li>
                            <li><a href="pages-recoverpw-img.html">Recover Password 3</a></li>
                            <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                            <li><a href="pages-lock-screen-2.html">Lock Screen 2</a></li>
                            <li><a href="pages-lock-screen-img.html">Lock Screen 3</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="apps-tasks.html" class="menu-link">
                            <i class="feather icon-clipboard"></i>
                            <span> Tasks </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="icon feather icon-gitlab"></i>
                            <span> Projects </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="apps-projects-list.html">List</a></li>
                            <li><a href="apps-projects-details.html">Details</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-browser"></i>
                            <span> Layouts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="layouts-horizontal.html">Horizontal</a></li>
                            <li><a href="layouts-light-sidenav.html">Light Sidenav</a></li>
                            <li><a href="layouts-dark.html">layouts dark</a></li>
                            <li><a href="layouts-collapsed.html">Collapsed Sidenav</a></li>
                            <li><a href="layouts-boxed-vertical.html">Boxed Vertical</a></li>
                            <li><a href="layouts-boxed-horizontal.html">Boxed Horizontal</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- Menu link end -->
                <!-------------------------------------->

                <div class="clearfix"></div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- ===============     side menu content End   ================= -->
        <!-- ============================================================= -->


        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="content-page">
            <div class="content">

                <!-- ============================================================= -->
                <!-- ===============    Top bar header content start  ================= -->
                <!-- ============================================================= -->
                <div class="navbar-custom">
                    <!------------------------------------->
                    <!-- right side topbar content start -->
                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <li class="dropdown notification-list topbar-dropdown">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-mail noti-icon"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-map-pin text-muted"></i> &nbsp; Loction</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-upload-cloud text-muted"></i> &nbsp; Upload File</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-activity text-muted"></i> &nbsp; Report</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-life-buoy text-muted"></i> &nbsp; Support</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-github text-muted"></i> &nbsp; Github</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-slack text-muted"></i> &nbsp; Slack</a>
                            </div>
                        </li>

                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-bell noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0">
                                        <span class="float-right">
                                            <a href="javascript: void(0);" class="text-dark">
                                                <small>Clear All</small>
                                            </a>
                                        </span>Notification <span class="badge badge-danger badge-pill">5 new</span>
                                    </h5>
                                </div>
                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">New order has been received.
                                            <small class="text-muted">1 min ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-account-plus"></i>
                                        </div>
                                        <p class="notify-details">Membership application has been added.
                                            <small class="text-muted">5 hours ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Cristina Pride</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>New report file has been uploaded.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">Database sever #2 has been fully restarted.
                                            <small class="text-muted">4 days ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Karen Robinson</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>Membership application has been added.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-heart"></i>
                                        </div>
                                        <p class="notify-details">Herry liked
                                            <b>Admin </b>
                                            <small class="text-muted">13 days ago</small>
                                        </p>
                                    </a>
                                </div>
                                <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
                                    View All
                                </a>
                            </div>
                        </li>
                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle nav-user arrow-none mx-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <span class="account-user-avatar">
                                    <img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
                                </span>
                                <span>
                                    <span class="account-user-name">Rang Avdhut</span>
                                </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-user text-muted"></i> &nbsp; My profile</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-mail text-muted"></i> &nbsp; Messages</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-settings text-muted"></i> &nbsp; settings</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-power text-danger"></i> &nbsp; Log Out</a>
                            </div>
                        </li>
                    </ul>
                    <!-- right side topbar content end -->
                    <!------------------------------------->

                    <!---------------------------------------------->
                    <!-- Left side topbar content Start -->

                    <!-- Minimenu and mobille toggle button start -->
                    <button class="button-menu-mobile open-left">
                        <i class="feather icon-menu"></i>
                    </button>
                    <!-- Minimenu and mobille toggle button end -->


                    <div class="header-search">
                        <form>
                            <div class="input-group">
                                <span class="feather icon-search"></span>
                                <input type="text" class="form-control" placeholder="Search...">
                            </div>
                        </form>
                    </div>
                    <!-- Left side topbar content end -->
                    <!------------------------------------->
                </div>
                <!-- ================================================================== -->
                <!-- ===============    Top bar header content end  ================= -->
                <!-- ================================================================== -->


                <!-- Start Content-->
                <div class="container-fluid">

                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="javascript: void(0);">Projects</a></li>
                                        <li class="breadcrumb-item active">Project Details</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">Project Details</h4>
                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">Assignees</div>
                                <div class="card-body">
                                    <div class="media align-items-center">
                                        <img src="assets/images/users/avatar-1.jpg" class="rounded-circle ui-w-60 mr-3" alt="avatar image">
                                        <div class="media-body">
                                            <h5 class="m-0">Sunita Ahir</h5>
                                            <p class="mb-0 text-muted">Sr Team Manager</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">Label</div>
                                <div class="card-body">
                                    <span class="badge badge-primary-lighten">Html</span>
                                    <span class="badge badge-secondary-lighten">Scss</span>
                                    <span class="badge badge-success-lighten">Uikit</span>
                                    <span class="badge badge-danger-lighten">Template</span>
                                    <span class="badge badge-warning-lighten">Error Free</span>
                                    <span class="badge badge-info-lighten">Javascript</span>
                                    <span class="badge badge-dark-lighten">Browser Tested</span>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">Members</div>
                                <div class="card-body">
                                    <img src="assets/images/users/avatar-2.jpg" class="rounded-circle ui-w-40 mr-2" alt="avatar image">
                                    <img src="assets/images/users/avatar-3.jpg" class="rounded-circle ui-w-40 mr-2" alt="avatar image">
                                    <img src="assets/images/users/avatar-4.jpg" class="rounded-circle ui-w-40 mr-2" alt="avatar image">
                                    <img src="assets/images/users/avatar-5.jpg" class="rounded-circle ui-w-40 mr-2" alt="avatar image">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <!-- project card -->
                            <div class="card d-block">
                                <div class="card-body">
                                    <!-- project title-->
                                    <h3 class="mt-0">
                                        Software Managment System
                                    </h3>
                                    <div class="badge badge-primary mb-3">Running</div>

                                    <h5>Project Overview:</h5>

                                    <p class="text-muted mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                                        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>

                                    <p class="text-muted mb-4">when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

                                    <div class="row">
                                        <div class="col-md-4 col-lg-auto">
                                            <div class="mb-4">
                                                <h5>Start Date</h5>
                                                <p>14 March 2016 <small class="text-muted">4:38 PM</small></p>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-lg-auto">
                                            <div class="mb-4">
                                                <h5>End Date</h5>
                                                <p>16 December 2016 <small class="text-muted">12:28 PM</small></p>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-lg-auto">
                                            <div class="mb-4">
                                                <h5>Budget</h5>
                                                <p>$15,800</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-lg-auto">
                                            <div class="mb-4">
                                                <h5>Cost</h5>
                                                <p>$9,765</p>
                                            </div>
                                        </div>
                                    </div>

                                    <h5 class="mb-3">Progress Analytics</h5>
                                    <div class="my-3">
                                        <div id="basic-column"></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <h5>Project includes</h5>
                                            <div class="mb-1">HTML -
                                                <small class="text-muted">80%</small>
                                            </div>
                                            <div class="progress mb-3" style="height: 5px;">
                                                <div class="progress-bar bg-secondary progress-bar-striped" style="width: 80%;"></div>
                                            </div>
                                            <div class="mb-1">CSS -
                                                <small class="text-muted">95%</small>
                                            </div>
                                            <div class="progress mb-3" style="height: 5px;">
                                                <div class="progress-bar bg-success progress-bar-striped" style="width: 95%;"></div>
                                            </div>
                                            <div class="mb-1">Javascript -
                                                <small class="text-muted">90%</small>
                                            </div>
                                            <div class="progress mb-3" style="height: 5px;">
                                                <div class="progress-bar bg-warning progress-bar-striped" style="width: 90%;"></div>
                                            </div>
                                            <div class="mb-1">UI/UX -
                                                <small class="text-muted">80%</small>
                                            </div>
                                            <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-danger progress-bar-striped" style="width: 80%;"></div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <h5>Files</h5>
                                            <div class="card mb-2">
                                                <div class="p-2">
                                                    <div class="row align-items-center">
                                                        <div class="col-auto">
                                                            <div class="ui-w-50">
                                                                <span class="avatar-title rounded">
                                                                    .ZIP
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="col pl-0">
                                                            <a href="#!" class="text-muted font-weight-bold">Bee-templtes.zip</a>
                                                            <p class="mb-0">152.36 MB</p>
                                                        </div>
                                                        <div class="col-auto">
                                                            <a href="#!" class="btn btn-link btn-lg text-muted">
                                                                <i class="dripicons-download"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card mb-2">
                                                <div class="p-2">
                                                    <div class="row align-items-center">
                                                        <div class="col-auto">
                                                            <img src="assets/images/projects/project-1.jpg" class="ui-w-50 rounded" alt="file-image" />
                                                        </div>
                                                        <div class="col pl-0">
                                                            <a href="#!" class="text-muted font-weight-bold">Admin-template.jpg</a>
                                                            <p class="mb-0">23.48 MB</p>
                                                        </div>
                                                        <div class="col-auto">
                                                            <a href="#!" class="btn btn-link btn-lg text-muted">
                                                                <i class="dripicons-download"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card mb-0">
                                                <div class="p-2">
                                                    <div class="row align-items-center">
                                                        <div class="col-auto">
                                                            <div class="ui-w-50">
                                                                <span class="avatar-title bg-secondary rounded">
                                                                    .mkv
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="col pl-0">
                                                            <a href="#!" class="text-muted font-weight-bold">ticket-bug.mkv</a>
                                                            <p class="mb-0">17.35 MB</p>
                                                        </div>
                                                        <div class="col-auto">
                                                            <a href="#!" class="btn btn-link btn-lg text-muted">
                                                                <i class="dripicons-download"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-body">
                                    <h4 class="mt-0 mb-3">Comments (40+)</h4>
                                    <div class="media mt-2">
                                        <img class="mr-3 ui-w-50 rounded-circle" src="assets/images/users/avatar-3.jpg" alt="user image">
                                        <div class="media-body">
                                            <h5 class="mt-0">Jeremy Tomlinson</h5>
                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                                            galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.

                                            <div class="media mt-3">
                                                <a class="pr-3" href="#">
                                                    <img src="assets/images/users/avatar-4.jpg" class="ui-w-50 rounded-circle" alt="user image">
                                                </a>
                                                <div class="media-body">
                                                    <h5 class="mt-0">Kathleen Thomas</h5>
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                                                    galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center my-2">
                                        <a href="#!" class="text-danger">Load more . . .</a>
                                    </div>
                                    <hr>
                                    <textarea class="form-control form-control-light mb-2" placeholder="Write message" id="example-textarea" rows="3"></textarea>
                                    <div class="text-right">
                                        <div class="btn-group mb-2">
                                            <button type="button" class="btn btn-link btn-sm text-muted font-18"><i class="dripicons-paperclip"></i></button>
                                        </div>
                                        <div class="btn-group mb-2 ml-2">
                                            <button type="button" class="btn btn-primary btn-sm">Submit</button>
                                        </div>
                                    </div>
                                </div> <!-- end card-body-->
                            </div>
                            <!-- end card-->
                        </div> <!-- end col -->
                    </div>
                    <!-- end row -->

                </div> <!-- container -->

            </div> <!-- content -->

            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->

            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            © Shimba - by Beethemesdesign
                        </div>
                        <div class="col-md-6">
                            <div class="text-md-right footer-links d-none d-md-block">
                                <a href="javascript: void(0);">Buy Now</a>
                                <a href="http://www.bootstrapmb.com/">Rate us</a>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->


        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->


    </div>
    <!-- END wrapper -->





    <!-- Required js -->
    <script src="assets/js/app.js"></script>


    <!-- third party:js -->
    <script src="assets/js/vendor/apexcharts.min.js"></script>

    <!-- demo app -->
    <script src="assets/js/demo/demo.project-detail.js"></script>

</body>

</html>
